import React,{useState,useEffect} from 'react'
import { Swiper,Tag,NavBar ,Rate} from '@nutui/nutui-react'
import {ArrowLeft,ArrowRight } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import '../css/jingquXQ.css'

export default function JingquXQ() {
  let navigate = useNavigate()
  let _id = window.location.href.split('=')[1]
  let [dataObj,setDataObj] = useState({})
  let [imgArr,setImgArr] = useState([])
  let getData = async()=>{
    let {data:{code,data}} = await axios.get('http://localhost:3000/jingquxiangqing?_id='+_id)
    if(code === 200){
      setDataObj(data[0])
      setImgArr(data[0].images)      
    }
  }
  useEffect(()=>{
    getData()
    
  },[])
  const list = [
    'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
    'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
    'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
    'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
  ]
  return (
    <div style={{position:'relative'}}>
      <NavBar
        back={
          <>
            <ArrowLeft  />
          </>
        }
        right={
          <span className="flex-center">
          </span>
        }
        onBackClick={(e) => navigate(-1)}
      >
        景区详情
      </NavBar>
      <Swiper
        autoPlay
        loop
        slideSize={400}
        indicator
        style={{
          '--nutui-indicator-color': '#426543',
          '--nutui-indicator-dot-color': '#426ddd',
        }}
      >
        {imgArr.map((item, index) => {
          return (
            <Swiper.Item key={index}>
              <img style={{ width: '100%', height: '300px'}} src={item} alt={imgArr[index]} draggable={false} />
            </Swiper.Item>
          )
        })}
      </Swiper>
      <div className="main">
        <span style={{fontWeight:'bold',fontSize:'18px',verticalAlign:'middle',marginRight:'10px'}}>{dataObj.name}</span>
        <Tag type="info">{dataObj.grade}</Tag> <br />
        <p style={{fontSize:'14px',margin:'10px 0'}}>{dataObj.description}</p>
        <span style={{color:'rgb(25,210,35)',fontSize:'14px'}}>开放时间</span>
        <span style={{fontSize:'14px',marginLeft:'20px'}}>{dataObj.openingHours}</span>
        <p style={{marginTop:'20px',marginBottom:'10px',fontSize:'14px',color:'rgb(25,210,35)'}}>景区评分</p>
        <Rate value={dataObj.rating} readOnly   /><br />
        <span style={{fontWeight:'bold',fontSize:'14px',verticalAlign:'middle',marginRight:'10px',marginTop:'10px',display:'block'}}>日场票</span>
        <div className='piao'>
          <span style={{fontSize:'16px',display:'block'}}>成人票</span>
          <p>可订今日  随买随用  可退票</p>
          <p>已售400+</p>
          <p style={{marginTop:'10px'}}>
            <a href="" style={{verticalAlign:'top'}}>购买须知</a> <ArrowRight/>
          </p>
          <div className="manei">
            <p>￥{dataObj.ticketPrice}起</p>
            <button onClick={()=>{navigate(`/app/yuding?_id=${dataObj._id}&piao=成人票&type=日场&name=${dataObj.name}&price=${dataObj.ticketPrice}`)}}>预定</button>
          </div>
        </div>
        <div className='piao'>
          <span style={{fontSize:'16px',display:'block'}}>儿童票</span>
          <p>可订今日  随买随用  可退票</p>
          <p>已售400+</p>
          <p style={{marginTop:'10px'}}>
            <a href="" style={{verticalAlign:'top'}}>购买须知</a> <ArrowRight/>
          </p>
          <div className="manei">
            <p>￥{dataObj.ticketPrice/2}起</p>
            <button onClick={()=>{navigate(`/app/yuding?_id=${dataObj._id}&piao=儿童票&type=日场&name=${dataObj.name}&price=${dataObj.ticketPrice/2}`)}}>预定</button>
          </div>
          
        </div>


        <span style={{fontWeight:'bold',fontSize:'14px',verticalAlign:'middle',marginRight:'10px',marginTop:'10px',display:'block'}}>夜场票</span>
        <div className='piao'>
          <span style={{fontSize:'16px',display:'block'}}>成人票</span>
          <p>可订今日  随买随用  可退票</p>
          <p>已售400+</p>
          <p style={{marginTop:'10px'}}>
            <a href="" style={{verticalAlign:'top'}}>购买须知</a> <ArrowRight/>
          </p>
          <div className="manei">
            <p>￥{dataObj.ticketPrice}起</p>
            <button onClick={()=>{navigate(`/app/yuding?_id=${dataObj._id}&piao=成人票&type=夜场&name=${dataObj.name}&price=${dataObj.ticketPrice}`)}}>预定</button>
          </div>
        </div>
        <div className='piao'>
          <span style={{fontSize:'16px',display:'block'}}>儿童票</span>
          <p>可订今日  随买随用  可退票</p>
          <p>已售400+</p>
          <p style={{marginTop:'10px'}}>
            <a href="" style={{verticalAlign:'top'}}>购买须知</a> <ArrowRight/>
          </p>
          <div className="manei">
            <p>￥{dataObj.ticketPrice/2}起</p>
            <button onClick={()=>{navigate(`/app/yuding?_id=${dataObj._id}&piao=儿童票&type=夜场&name=${dataObj.name}&price=${dataObj.ticketPrice/2}`)}}>预定</button>
          </div>
          
        </div>
      </div>
      
    </div>
  )
}
